<template>
  <div>
    <div class="whereconfigplane">
      <div class="trhead">
        <div class="tdhead filedwidth1">条件字段</div>
        <div class="tdhead filedwidth">
          条件类型
        </div>
        <div class="tdhead filedwidth1">
          条件值
        </div>
        <div class="tdhead operatewidth">
          操作
        </div>
        <div class="clearfloat"></div>
      </div>
      <div class="tr" v-for="item in datalist" :key="item.filed">
        <div class="td filedwidth1">
          <div class="tdcontext">
            <el-select v-model="item.filed" placeholder="请选择">
              <el-option v-for="item in querylist" :key="item.property" :label="item.paramname" :value="item.property" size="small">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="td filedwidth">
          <div class="tdcontext">
            <el-select v-model="item.variabletype" placeholder="请选择" @change="item.value=''">
              <el-option v-for="item in variabletype" :key="item.value" :label="item.lable" :value="item.value" size="small">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="td filedwidth1">
          <div class="tdcontext">
            <el-select v-model="item.value" placeholder="请选择" v-if="item.variabletype===1">
              <el-option v-for="item in fromVariableList" :key="item.value" :label="item.title" :value="item.value" size="small">
              </el-option>
            </el-select>
            <el-input v-model="item.value" placeholder="请输入自定义" v-else-if="item.variabletype===2"></el-input>
            <el-input v-model="item.value" placeholder="请输入url变量参数名" v-else-if="item.variabletype===3"></el-input>
            <el-select v-model="item.value" placeholder="请选择" v-if="item.variabletype===4">
              <el-option v-for="item in currentVariable" :key="item.value" :label="item.lable" :value="item.value" size="small">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="td operatewidth">
          <i class="el-icon-delete" @click="delrow(item)" style="    font-size: 18px;color:red;
    padding-top: 5px;"></i>
        </div>
        <div class="clearfloat"></div>
      </div>
      <div class="addclass" @click="addrow"><i class="el-icon-plus"></i>添加条件</div>
    </div>
    <div style="    text-align: right;">
      <el-button type="primary" @click="saveinfo">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { findFromVariable } from '@/components/formdesign/findfrom.js'
export default {
  props: ['queryfiledlist', 'querywherelist', 'controlinfo'],
  data () {
    return {
      datalist: [{ filed: '', value: '', variabletype: 1 }],
      variabletype: [{ value: 1, lable: '表单变量' }, { value: 2, lable: '自定义变量' }, { value: 3, lable: 'url变量' }, { value: 4, lable: '当前环境变量' }],
      currentVariable: [{ value: '$user.userId', lable: '当前用户ID' },
      { value: '$user.userName', lable: '用户名称' },
      { value: '$user.realaname', lable: '用户真实名称' },
      { value: '$user.deptcode', lable: '部门编码' },
      { value: '$user.organcode', lable: '机构编码' },
      { value: '$user.organname', lable: '机构名称' },
      { value: '$user.deptname', lable: '部门名称' },
      { value: '$user.deptid', lable: '部门ID' },
      { value: '$user.organid', lable: '机构ID' },
      { value: '$user.phone', lable: '手机号码' }],
      querylist: [],
      fromVariableList: [],
      fromInfo: this.changeFromInfo()
    }
  },
  created () {
    if (this.queryfiledlist !== undefined) {
      this.queryfiledlist.forEach(ee => {
        if (ee.property === 'body') {
          this.querylist = ee.children
        }
      })
      this.fromVariableList = findFromVariable(this.fromInfo, this.controlinfo.gridid, this.controlinfo.model)
      this.fromVariableList.splice(0, 0, { value: '$tableNewId', title: '主表主键ID' })
      this.datalist = this.querywherelist
    }
  },
  methods: {
    addrow () {
      this.datalist.push({ filed: '', value: '', variabletype: 1 })
    },
    delrow (item) {
      this.datalist.splice(this.datalist.indexOf(item), 1)
    },
    saveinfo () {
      let index = 0
      let ischeck = true
      this.datalist.forEach(ee => {
        if (ee.filed === '') {
          this.$message.error('第' + index + '行查询字段不能为空')
          ischeck = false
          return
        }
        if (ee.value === '') {
          this.$message.error('第' + index + '行条件值不能为空')
          ischeck = false
          return
        }
        index++
      })
      if (ischeck === true) {
        this.$emit('saveinfo', this.datalist)
      }
    },
    close () {
      this.$emit('close')
    }
  },
  computed: {
    SetChangeFromInfo () {
      return this.changeFromInfo()
    }
  },
  watch: {
    SetChangeFromInfo (val) {
      this.fromInfo = val
    }
  },
  inject: ['changeFromInfo']
}
</script>
<style scoped>
.whereconfigplane {
  height: 400px;
}
.trhead {
  width: 100%;
  float: left;
}
.trhead .tdhead {
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  text-align: center;
  height: 40px;
  white-space: nowrap;
  padding-top: 5px;
  text-align: center;
  float: left;
  background-color: #f5f5f5;
}
.filedwidth {
  width: 150px;
}
.filedwidth1 {
  width: 250px;
}
.operatewidth {
  width: 60px;
}
.tr {
  width: 100%;
  float: left;
}
.td {
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  text-align: center;
  height: 50px;
  padding-top: 5px;
  text-align: center;
  white-space: nowrap;
  float: left;
}
.tdcontext {
  margin-left: 5px;
  margin-right: 5px;
}
.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
.addclass {
  padding: 8px;
  color: #409eff;
  cursor: pointer;
}
</style>
